.container-fluid{
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    position: relative;
}
.container-fluid div{
    box-sizing: border-box;
}
.col{
    width: 30%;
    height: 660px;
    display: inline-block;
    text-align: left;
    overflow: auto;
    padding: 10px;
}

.col-green{
    background-color: #dff0d8;
}
.col-yellow{
    background-color: #fcf8e3;
}
.col-bule{
    background-color: #d9edf7;
}
.col span{
    color: #a94442;
    cursor: pointer;
    font-size: 12px;
}

.icons{
    position: absolute;
    left: 20%;
    top: 10%;
    width: 60%;
    padding: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    background-color: rgba(255,255,255,.7);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    z-index: 10;
    text-align: left;
}

.icon-list{
    height: 600px;
    overflow: auto;
}

.icon-list li{
    list-style: none;
    text-align: center;
    padding: 10px;
    float: left;
}
.icon-list li.active{
     background-color: #337ab7;
     color: #ffffff;
 }
.icon-list li:hover{
    background-color: #777;
    color: #ffffff;
}
.icon-pointer{
    color: #a94442;
    cursor: pointer;
    padding: 5px;
}
.msg{
    padding: 15px;
    margin: 0 auto;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    width: 90%;

}
.msg-success{
    color: #3c763d;
    background-color: #5cb85c;
    border-color: #d6e9c6;
}
.msg-error{
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.icon-green{
    color: #3a945b!important;
}
.icon-blue{
    color: #00A5E3!important;
}